<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1,minimum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/imap.css">
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <title>拱墅区教育地图</title>
</head>
<body>
    <!-- 信息弹窗 -->
    <div class="dialog" id="dialog">
        <div class="dialogTop">
            <div class="dialogTitle" id="dialogTitle">信息</div>
            <button class="dialogClose" id="dialogClose">x</button>
        </div>
        <div class="dialogContent" id="dialogContent">
            信息说明
        </div>
    </div>
    <!--地图容器-->
    <div class="imap" id="drag">
        
        <!-- 定位范围圈 -->
        <div class="iCircles" id="iCircles"></div>
        <!-- 集团详细数据 -->
        <div class="iGroups" id="iGroups">
            <!-- 学校详细数据 -->
            <div class="iSchools" id="iSchools"></div>
        </div>
    </div>
    <!-- 引导弹层 -->
    <div class="guide" id="guide"></div>

    <script>
        var iClientWidth = document.body.clientWidth;
        var iClientHeight = document.body.clientHeight;

        var drag = document.getElementById("drag");

        var iSetWidth = iDWidth = drag.offsetWidth;
        var iSetHeight = iDHeight = drag.offsetHeight;
        var iStep = 0;
        var iStepMax = 2;
        var iRate = null;
        var iRateMath = null;
        
        var iCircles = document.getElementById("iCircles");
        var iGroups = document.getElementById("iGroups");
        var iSchools = document.getElementById("iSchools");

        var dialog = document.getElementById("dialog");
        var dialogTitle = document.getElementById("dialogTitle");
        var dialogClose = document.getElementById("dialogClose");
        var dialogContent = document.getElementById("dialogContent");

        var guide = document.getElementById("guide");

        var iGroupDiv = document.getElementsByClassName("iGroup");
        var iGuideItem = document.getElementsByClassName("guideItem");
        var iSchoolDiv = document.getElementsByClassName("iSchool");

        var schoolData = [];

        
        

        if(iClientWidth > iClientHeight){
            iRate = Math.round(iClientWidth / iDWidth * 1000);
            drag.style.backgroundSize = "100% auto";
        }else{
            iRate = Math.round(iClientHeight / iDHeight * 1000);
            drag.style.backgroundSize = "auto 100%";
        }
        iRateMath = iRate / 1000;
        iRateStep = (1000 - iRate) / iStepMax;
        drag.style.width = iDWidth * iRateMath + "px";
        drag.style.height = iDHeight * iRateMath + "px";

        //缩放事件
        var isScale = true;
        //放大方法
        function scaleFD(e){
            drag.style.left = "0px";
            drag.style.top = "0px";
            iSchools.className = "iSchools active";
            isScale = false;
            if(iStep < iStepMax){
                iStep++;
                iRate = Math.round(iRate + iRateStep);
                iRateMath = iRate / 1000;
                drag.style.width = iDWidth * iRateMath+ "px";
                drag.style.height = iDHeight * iRateMath+ "px";
                
            }
        }
        //缩小方法
        function scaleSX(){
            drag.style.left = "0px";
            drag.style.top = "0px";
            iSchools.className = "iSchools";
            isScale = false;
            if(iStep > 0){
                iStep--;
                iRate = Math.round(iRate - iRateStep);
                iRateMath = iRate / 1000;
                drag.style.width = iDWidth * iRateMath+ "px";
                drag.style.height = iDHeight * iRateMath+ "px";
                
            }
        }
        

        //PC端 滚轮事件
        document.addEventListener("mousewheel",function(e){
            isMove = false;
            var e = event || window.event;
            diffX = event.pageX - drag.offsetLeft;
            diffY = event.pageY - drag.offsetTop;
            for(var h = 0; h < iSchoolDiv.length; h++){
                var iSchoolDivX = iSchoolDiv[h].offsetLeft;
                var iSchoolDivY = iSchoolDiv[h].offsetTop;
                iSchoolDiv[h].style.left = schoolData[h].x * iRateMath + "px";
                iSchoolDiv[h].style.top = schoolData[h].y * iRateMath + "px";
            }
            dClose();
            if(isScale){
                if(e.wheelDelta > 0){
                    scaleFD();
                }else{
                    scaleSX();
                };
                setTimeout(function(){
                    isScale = true;
                },500)
            }
        });

        //拖拽事件
        var diffX = 0;
        var diffY = 0;
        var moveX = 0;
        var moveY = 0;
        var isMove = true;

        //拖拽方法
        function iMove(e){
            moveX = e.pageX - diffX;
            moveY = e.pageY - diffY;
            if(moveX < 0 && moveX > iClientWidth - drag.offsetWidth){
                drag.style.left = moveX + "px";
            }else if(moveX > 0){
                drag.style.left = "0px";
            }else if(moveX < iClientWidth - drag.offsetWidth){
                drag.style.left = iClientWidth - drag.offsetWidth + "px";
            }
            if(moveY < 0 && moveY > iClientHeight - drag.offsetHeight){
                drag.style.top = moveY + "px";
            }else if(moveY > 0){
                drag.style.top = "0px";
            }else if(moveY < iClientHeight - drag.offsetHeight){
                drag.style.top = iClientHeight - drag.offsetHeight + "px";
            }
            dClose();
        }

        //PC端 拖拽事件
        //--鼠标按下
        document.addEventListener("mousedown",function(e){
            isScale = false;
            
            diffX = event.pageX - drag.offsetLeft;
            diffY = event.pageY - drag.offsetTop;
            //--鼠标拖动
            document.addEventListener("mousemove",function(e){
                if(isMove){
                    iMove(event);
                }
                isMove = false;
            },false);
            document.addEventListener("mouseup",function(e){
                isMove = true;
                isScale = true;
            },false);
        },false);
        //--鼠标抬起
        

        //移动端 双指事件
        var start = null;
        var now = null;
        document.addEventListener("touchstart",function(e){
            if(e.touches.length >= 2){
                //缩放
                start = e.touches;
                isMove = false;
            }else{
                //拖拽
                diffX = e.touches[0].pageX - drag.offsetLeft;
                diffY = e.touches[0].pageY - drag.offsetTop;
                isScale = false;
            };
        },false);
        document.addEventListener("touchmove",function(e){
            e.preventDefault();
            var now = e.touches;
            if(e.touches.length >= 2){
                if(isScale){
                    for(var h = 0; h < iSchoolDiv.length; h++){
                        var iSchoolDivX = iSchoolDiv[h].offsetLeft;
                        var iSchoolDivY = iSchoolDiv[h].offsetTop;
                        iSchoolDiv[h].style.left = schoolData[h].x * iRateMath + "px";
                        iSchoolDiv[h].style.top = schoolData[h].y * iRateMath + "px";
                    }
                    var val0 = getDistance(start[0],start[1]);
                    var val1 = getDistance(now[0],now[1]);
                    if(val0 < val1){
                        //scaleFD();
                    }else{
                        //scaleSX();
                    };
                }
            }else{
                if(isMove){
                    iMove(e.touches[0]);
                }
            }
            
        },false);
        document.addEventListener("touchend",function(e){
            isMove = true;
            isScale = true;
        })
        //计算方法
        function getDistance(p1, p2) {
            var x = p2.pageX - p1.pageX,
                y = p2.pageY - p1.pageY;
            return Math.sqrt((x * x) + (y * y));
        };
        
        var iData = null;
        $.ajax({
            url: "data.json",
            type: "GET",
            dataType: "JSON",
            success: function(data){
                iData = data;
                for(var i = 0; i < data.length; i++){
                    //添加定位点
                    var pointDiv = document.createElement("div");
                    pointDiv.className = "iPoint";
                    pointDiv.style.left = data[i].x * iRateMath + "px";
                    pointDiv.style.top = data[i].y * iRateMath + "px";
                    iCircles.appendChild(pointDiv);

                    //添加范围圈
                    // var circleDiv = document.createElement("div");
                    // circleDiv.className = "iCircle";
                    // circleDiv.style.width = circleDiv.style.height = data[i].d + "px";
                    // circleDiv.style.background = "radial-gradient(rgba("+data[i].color+",0),"+"rgba("+data[i].color+",1))";
                    // pointDiv.appendChild(circleDiv);

                    //添加集团详细数据
                    // var groupDiv = document.createElement("div");
                    // groupDiv.className = "iGroup";
                    // groupDiv.innerText = data[i].name;
                    // groupDiv.style.backgroundImage = "url("+data[i].icon+")";
                    // groupDiv.style.left = data[i].x * iRateMath + "px";
                    // groupDiv.style.top = data[i].y * iRateMath + "px";
                    // iGroups.appendChild(groupDiv);
                    
                    //添加学校详细数据
                    var schools = data[i].school;
                    $.each(schools,function(index,item){
                        var schoolDiv = document.createElement("div");
                        schoolDiv.className = "iSchool";
                        schoolDiv.innerText = item.name;
                        schoolDiv.style.backgroundImage = "url("+item.icon+")";
                        schoolDiv.style.left = item.x * iRateMath + "px";
                        schoolDiv.style.top = item.y * iRateMath + "px";
                        iSchools.appendChild(schoolDiv);
                    });

                    //添加引导弹窗数据
                    var guideDiv = document.createElement("div");
                    guideDiv.className = "guideItem";
                    guideDiv.style.backgroundImage = "url("+data[i].icon+")";
                    guideDiv.innerText = data[i].name;
                    guide.appendChild(guideDiv);
                    guide.setAttribute("data-show","group");

                    //集团的点击事件
                    // iGroupDiv[i].onclick = (function(j){
                    //     return function(){
                    //         dialogInner(data[j]);
                    //         dialogInfo(data[j]);
                    //     }
                    // })(i);

                    //引导层点击事件
                    // iGuideItem[i].onclick = (function(k){
                    //     return function(){
                    //         isMove = false;
                    //         // dialogInner(data[k]);
                    //         // dialogInfo(data[k]);
                    //         guideSchool(data[k]);
                    //     }
                    // })(i);

                    

                    //信息弹窗关闭事件
                    dialogClose.onclick = dClose;
                    //获取学校信息组成数组
                    $.each(data[i].school,function(index,item){
                        schoolData.push(item);
                    })
                }
                //学校点击事件
                for( var m = 0; m < iSchoolDiv.length; m++){
                    iSchoolDiv[m].onclick = (function(n){
                        return function(){
                            dialogInner(schoolData[n]);
                            dialogInfo(schoolData[n]);
                            isMove = false;
                            event.cancelBubble = true;
                            event.stopPropagation();
                        }
                    })(m);
                };
                          
            }
        })
        window.onload = function(){
            $(".guideItem").on("click",function(){
                
            })
        }
        var gIndex = null;
        var sIndex = null;
        $(".guide").on("click",function(e){
            isMove = false;
            if(e.target.className == "guideItem"){
                if(guide.getAttribute("data-show") == "group"){
                    gIndex = $(e.target).index();
                    guide.setAttribute("data-show","school");
                    guide.innerHTML = "";
                    for(var i = 0; i < iData[gIndex].school.length; i++){
                        var guideDiv = document.createElement("div");
                        guideDiv.className = "guideItem";
                        guideDiv.style.backgroundImage = "url("+iData[gIndex].school[i].icon+")";
                        guideDiv.innerText = iData[gIndex].school[i].name;
                        guide.appendChild(guideDiv);
                    }
                    guide.className = "school guide";
                }else{
                    sIndex = $(e.target).index();
                    dialogInner(iData[gIndex].school[sIndex]);
                    dialogInfo(iData[gIndex].school[sIndex]);
                }
            }
            else{
                if(guide.className == "guide"){
                    guide.className = "active guide";
                }else if(guide.className == "school guide"){
                    guide.className = "active guide";
                    guide.setAttribute("data-show","group");
                    guide.innerHTML = "";
                    for(var i = 0; i < iData.length; i++){
                        var guideDiv = document.createElement("div");
                        guideDiv.className = "guideItem";
                        guideDiv.style.backgroundImage = "url("+iData[i].icon+")";
                        guideDiv.innerText = iData[i].name;
                        guide.appendChild(guideDiv);
                    }
                }else{
                    guide.className = "guide";
                }
            }
        })

        function dialogInner(data){
            var tab = ""
            if(data.school){
                var schoolInfo = [["学校名称","办学性质","备注"]];
                tab = '<table class = "iTable" cellpadding = "0" cellspacing = "0">';
                $.each(data.school,function(index,item){
                    schoolInfo.push([item.name,item.nature,item.remarks]);
                    tab = tab + '<tr>';
                    for(var d = 0; d < schoolInfo[index].length; d++){
                        if(index == 0){
                            tab = tab + "<th>" + schoolInfo[0][d] + "</th>";
                        }else{
                            tab = tab + "<td>" + schoolInfo[index][d] + "</td>";
                        }
                    }
                    tab = tab + '</tr>';
                })
            }
            tab = tab + '</table>';
            var sInner = "";
            if(data.images != ""){
                sInner = sInner + "<div class='schoolTitle'>学校地图</div><div class='schoolContent'>" + data.images + "</div>"
            }
            if(data.range != ""){
                sInner = sInner + "<div class='schoolTitle'>户籍儿童教育服务区</div><div class='schoolContent'>" + data.range + "</div>"
            }
            if(data.range1 != ""){
                sInner = sInner + "<div class='schoolTitle'>随迁子女教育服务区</div><div class='schoolContent'>" + data.range1 + "</div>"
            }
            if(data.rise != ""){
                sInner = sInner + "<div class='schoolTitle'>直升小学</div><div class='schoolContent'>" + data.rise + "</div>"
            }
            if(data.phone != ""){
                sInner = sInner + "<div class='schoolTitle'>电话</div><div class='schoolContent'>" + data.phone + "</div>"
            }
            if(data.tips != ""){
                sInner = sInner + "<div class='schoolTitle'>温馨提醒</div><div class='schoolContent'>" + data.tips + "</div>"
            }else{
                sInner = sInner + "<div class='schoolTitle'>温馨提醒</div><div class='schoolContent'>报名请携带报名材料：房产证及复印件、户口簿及复印件、预防接种卡！</div>"
            }
            if(data.content != ""){
                sInner = sInner + "<div class='schoolTitle'>其他信息</div><div class='schoolContent'><p>" + data.content + "</p></div>"
            }
            dialogContent.innerHTML = tab + sInner;
        }
        function dialogInfo(item){
            // dialog.style.left = item.x * iRateMath - dialog.offsetWidth / 2 + "px";
            // dialog.style.bottom = drag.offsetHeight - item.y * iRateMath + 10 + "px";
            dialogTitle.innerText = item.name;
            dialog.style.visibility = "visible";
            dialog.style.opacity = "1";
            // if(item.x < iClientWidth/2){
            //     drag.style.left = 0 + "px";
            //     console.log("左边1x");
            // }else if(item.x > drag.offsetWidth - iClientWidth/2){
            //     drag.style.left = -(drag.offsetWidth - iClientWidth) + "px";
            //     console.log("右边1x");
            // }else{
            //     drag.style.left = -(parseFloat(item.x)-iClientWidth/2) + "px";
            //     console.log("正常1x");
            // }
            // if(item.y < iClientHeight/2 + dialog.offsetHeight){
            //     drag.style.top = 0 + "px";
            //     console.log("上边1y");
            // }else if(item.y > drag.offsetHeight - iClientHeight/2+dialog.offsetHeight/2){
            //     drag.style.top = -(drag.offsetHeight - iClientHeight-dialog.offsetHeight/2) + "px";
            //     console.log("下边1y");
            // }else{
            //     drag.style.top = -(parseFloat(item.y)-iClientHeight/2-dialog.offsetHeight/2) + "px";
            //     console.log("正常1y");
            // }
        }
        function dClose(){
            dialog.style.visibility = "hidden";
            dialog.style.opacity = "0";
        }
        
    </script>
</body>
</html>